<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>JavaScript里的函数是什么 | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="1.定义i 匿名函数 ​    var fn = function(){return 1} 有name fn.name = &amp;#39;fn&amp;#39; ​    ii 具名函数 ​    function fn(){ return 1} ​    var fn2 = function fn3(){ return 2 } ​     两者的区别在于函数作用域 ​    console.log(fn()">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript里的函数是什么">
<meta property="og:url" content="https://storm4542.github.io/archives/4cf7e60f.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="1.定义i 匿名函数 ​    var fn = function(){return 1} 有name fn.name = &amp;#39;fn&amp;#39; ​    ii 具名函数 ​    function fn(){ return 1} ​    var fn2 = function fn3(){ return 2 } ​     两者的区别在于函数作用域 ​    console.log(fn()">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-08-25T09:08:27.172Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JavaScript里的函数是什么">
<meta name="twitter:description" content="1.定义i 匿名函数 ​    var fn = function(){return 1} 有name fn.name = &amp;#39;fn&amp;#39; ​    ii 具名函数 ​    function fn(){ return 1} ​    var fn2 = function fn3(){ return 2 } ​     两者的区别在于函数作用域 ​    console.log(fn()">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-关于函数" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      JavaScript里的函数是什么
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1-定义"><a href="#1-定义" class="headerlink" title="1.定义"></a>1.定义</h3><pre><code>i 匿名函数
</code></pre><p>​    <code>var fn = function(){return 1} 有name fn.name = &#39;fn&#39;</code></p>
<p>​    ii 具名函数</p>
<p>​    <code>function fn(){ return 1}</code></p>
<p>​    <code>var fn2 = function fn3(){ return 2 }</code></p>
<p>​     两者的区别在于函数作用域</p>
<p>​    <code>console.log(fn()) fn()</code>  </p>
<p>​    <code>console.log(fn3()) undefined</code></p>
<p>​    iii 箭头函数</p>
<p>​    <code>var fn = (i,j)=&gt;{return i+j}</code> fn.name = fn</p>
<p>###2.词法作用域（静态作用域）</p>
<pre><code>  var global1 = 1

     function fn1(param1){

       var local1 = &apos;local1&apos;
       var local2 = &apos;local2&apos;)
       function fn2(param2){
           var local2 = &apos;inner local2&apos;
           console.log(local1)
           console.log(local2)
       }

     function fn3(){
         var local2 = &apos;fn3 local2&apos;
         fn2(local2)
     }
   }


var i = 1,j = 2,k = 3;

function a(o,p,x,q){

var x = 4;
    alert(i+&apos;a&apos;);
function b(r,s) {
    var i = 11,y = 5;
        alert(i+ &apos;b&apos;);
    function c(t){
      var z = 6;
            alert(i+&apos;c&apos;);
    };
        //函数表达式
    var d = function(){
            alert(y+&apos;y d&apos;);
        };
        c(60);
        d();
};
    b(40,50);
    }

a(10,20,30);
</code></pre><p> 通过画出词法树分析。先找同级有没有，再找上级的。</p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">方方的视频</a></p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">参考</a></p>
<p>###3.call stack</p>
<p>​    i stack</p>
<p>​    栈，先进后出，后进先出。</p>
<blockquote>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">1+1+1</a></p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">1+2+3</a></p>
<p><a href="javascript:;">递归</a></p>
<blockquote>
<p>斐波那契数列</p>
<p>function fb(n){</p>
<p>console.log(‘我正在计算’+ n );</p>
<p>if( n&gt;=3 ){</p>
<p>return fb(n-1) + fb(n-2)</p>
<p>}else{</p>
<p>return 1;</p>
<p>}</p>
<p>}</p>
</blockquote>
</blockquote>
<h3 id="4-this-amp-amp-arguments"><a href="#4-this-amp-amp-arguments" class="headerlink" title="4.this &amp;&amp; arguments"></a>4.this &amp;&amp; arguments</h3><ul>
<li><p>this 是隐藏的第一个参数，而且必须是对象。</p>
<ul>
<li><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>); <span class="built_in">console</span>.log(<span class="built_in">arguments</span>)&#125;</span><br><span class="line">f.call() <span class="comment">// window []</span></span><br><span class="line">f.call(&#123;<span class="attr">name</span>:<span class="string">'zty'</span>&#125;) <span class="comment">// &#123;name:'zty'&#125; []</span></span><br><span class="line">f.call(&#123;<span class="attr">name</span>:<span class="string">'zty'</span>&#125;,<span class="number">1</span>,<span class="number">2</span>) <span class="comment">// &#123;name:'zty&#125; [1,2]</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>调用一个函数，开始需要三部</p>
<ul>
<li><p>记录函数的位置，放入 call stack</p>
</li>
<li><p>传入 this 对象</p>
</li>
<li><p>传入 arguments 数组(伪)</p>
</li>
</ul>
</li>
<li><p>为什么要用 call</p>
<ul>
<li>fn() 是 fn.call() 的阉割版</li>
</ul>
</li>
</ul>
</li>
<li><p>为什么 this 必须是对象</p>
<ul>
<li><p>因为 this 就是函数与对象之间的羁绊</p>
</li>
<li><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">  name : <span class="string">'zty'</span>,</span><br><span class="line">  sayHi : <span class="function"><span class="keyword">function</span>(<span class="params">person</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(person.name ,<span class="string">'HI'</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">person.sayHi(person) <span class="comment">// zty HI 这种方式很蠢，前面有 person 后面有 person, 为什么 JS 不能帮我把 参数中的person 指定了呢，于是改造一下</span></span><br><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">  name : <span class="string">'zty'</span>,</span><br><span class="line">  sayHi : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.name ,<span class="string">'HI'</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">person.sayHi.call(person) <span class="comment">// zty HI 不吃语法糖 this === person ，指定this</span></span><br><span class="line">person.sayHi() <span class="comment">// 吃语法糖</span></span><br><span class="line">person.sayHi.call(&#123;<span class="attr">name</span>:<span class="string">'xxx'</span>&#125;) <span class="comment">// xxx HI 说明里面的函数其实跟person对象没有任何关系，是独立的。(this 真的很不靠谱)</span></span><br><span class="line">------------------------------</span><br><span class="line"><span class="keyword">var</span> fn = person.sayHi;</span><br><span class="line">fn() <span class="comment">// HI 显示不出 'zty',这是因为fn()其实是 fn.call() =&gt; this为window</span></span><br><span class="line">fn(person) <span class="comment">// HI this === window</span></span><br><span class="line">fn.call(person) <span class="comment">// zty HI this === persom</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<h3 id="5-call-aplly"><a href="#5-call-aplly" class="headerlink" title="5.call/aplly"></a>5.call/aplly</h3><p>​    i call 用是函数调用标准写法，传递this , xxx.call(ASthis , arguments)</p>
<p>​    ii  当你不确定参数的个数时候(数组)，使用apply , xxx.apply(ASthis , [ … ])</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> n = <span class="number">0</span> ;</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span> ; i&lt;<span class="built_in">arguments</span>.length ; i++)&#123;</span><br><span class="line">    n+=<span class="built_in">arguments</span>[i]</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> n ;</span><br><span class="line">&#125; <span class="comment">// 无论有多少参数都可以求和的函数</span></span><br><span class="line">sum.call(<span class="literal">undefined</span> , <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)   <span class="comment">// 6</span></span><br><span class="line">sum.call(<span class="literal">undefined</span> , <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>) <span class="comment">// 10</span></span><br><span class="line"><span class="comment">//假如你不知道有多少参数呢？传给你一个数组 a , 并不知道里面的内容，如何求和？</span></span><br><span class="line"><span class="comment">//或者 a.length === 100 ，你如何传参呢？</span></span><br><span class="line">sum.apply(<span class="literal">undefined</span> , a);</span><br></pre></td></tr></table></figure>
<h3 id="6-bind"><a href="#6-bind" class="headerlink" title="6.bind"></a>6.bind</h3><p>​    call 和 apply 都是直接调用函数，而 bind 是返回一个新的函数 ， 这个新函数会call 原来的参数 ，call 的参数由你指定。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> view = &#123;</span><br><span class="line">  element : <span class="string">'#div'</span>,</span><br><span class="line">  bindEvents : <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.element.onClick = <span class="keyword">this</span>.onClick.bind(<span class="keyword">this</span>)</span><br><span class="line">    <span class="comment">//view.element.onClick = view.onClick.bind(view)</span></span><br><span class="line">    <span class="comment">//this.onClick.bind(this) bind的参数this ，会变成 onClick 的第一个参数</span></span><br><span class="line">    <span class="comment">//为什么这么做？因为 onClick 的 this ， 是被点击元素，我们需要的 this === view</span></span><br><span class="line">  &#125;</span><br><span class="line">    onClick: <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">this</span>.element.addClass(<span class="string">'active'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="7-回调-callback"><a href="#7-回调-callback" class="headerlink" title="7.回调 callback"></a>7.回调 callback</h3><p>​    i 名词形式 ： 被当做参数的函数 <code>array.sort(function(a,b){return a-b})</code></p>
<p>​    ii 动词形式 ： 调用这个回调</p>
<p>​    回调跟异步没有一点关系</p>
<h3 id="8-构造函数"><a href="#8-构造函数" class="headerlink" title="8.构造函数"></a>8.构造函数</h3><p>​    i 返回对象的函数就是构造函数  <code>new Number(1)</code></p>
<p>​    ii 一般首字母大写。</p>
<h3 id="9-箭头函数"><a href="#9-箭头函数" class="headerlink" title="9.箭头函数"></a>9.箭头函数</h3><p>​    i 箭头函数没有 this </p>
<p>​    ii 有 arguments </p>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="88d55ab5.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          制作一个基于Vue的Tabs轮子
        
      </div>
    </a>
  
  
    <a href="5983b51f.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">前端中的MVC</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/4cf7e60f.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
